// 移动端页面分享快照生成总结https://juejin.im/post/5ba1ab97e51d450e8a65f9ac
<template>
   <div class="test">
      <div class="j_snapshot_img_box actShareImgBox">
          <div class="">
            我是html2canvas生成的图片
          </div>
          <!-- 用于展示html2canvas生成的图片 -->
          <img src="" class="j_snapshot_img">
      </div>
      <button type="button" @click="toCanvas">toCanvas</button>
   </div>
</template>
<script>
import html2canvas from 'html2canvas'
export default {
  data () {
    return {
      msg: 'html2canvas'
    }
  },
  methods: {
    toCanvas () {
      var $snapshot = document.querySelector('.tab')
      var $snapshotImg = document.querySelector('.j_snapshot_img')
      html2canvas($snapshot, {
        // useCORS: true, // 允许图片跨域
        backgroundColor: null,
        logging: false,
        scale: window.devicePixelRatio * 2
      }).then(function (canvas) {
        console.log(canvas)
        var dataURL = canvas.toDataURL()
        $snapshotImg.width = 800
        $snapshotImg.src = dataURL
      }, function (err) {
        console.error('oops, something went wrong!', err)
      })
    }
  }
}
</script>
<style>

</style>
